// Variables
// --------------------------------------------------

// Grays
@grayDarker:            #222;
@grayDark:              #333;
@gray:                  #555;
@grayLight:             #999;
@grayLighter:           #eee;
@white:                 #fff;


@colorPrimary:          #487fb9;
@colorPrimaryLight:     #5a8cc0;
@colorPrimaryLighter:   #7fa6ce;
@colorPrimaryDark:      #4072a7;
@colorPrimaryDarker:    #325983;
@colorPrimaryDarkest:   #111e2c;

@colorComplementRed:        #b94a48;
@colorComplementRedBright:  #cf2e54;
@colorComplementRedMuted:   #ce817f;

@colorComplementGreen:        #48b983;
@colorComplementGreenBright:  #6dc79c;
@colorComplementPurple:       #8348b9;
@colorComplementPurpleBright: #a87fce;

@colorComplementGray:       #4f4f4f;
@colorComplementGrayLight:  #696969;
@colorComplementGrayDark:   #363636;

// Brand colors
@brand-primary:         #428bca;
@brand-success:         #5cb85c;
@brand-warning:         #f0ad4e;
@brand-danger:          #d9534f;
@brand-info:            #5bc0de;


// stie colors
@jmh-primary:     @colorPrimary;

@colorContent:    @colorComplementGrayDark;

@colorLink:       @colorPrimaryLighter;
@colorLinkHover:  darken(@colorLink, 15%);

@colorHeader:     @colorComplementGray;
@colorSubHeader:  @colorComplementGrayLight;

@colorAccent:     @brand-warning;

@colorActive:     @colorAccent;
@colorInActive:   @grayLighter;
@colorQuote:      @colorSubHeader;

@colorNavLink:        @colorPrimary;
@colorNavLinkHover:   darken(@colorNavLink, 15%);
@colorNavLinkActive:  darken(@colorNavLink, 20%);
@colorNavAccent:      @colorComplementRed;

// =======================================
// Base
@color-body-bg:     @white;
@color-text:        @grayDark;

@color-link:        @colorPrimaryLighter;
@color-link-hover:  darken(@color-link, 15%);

@main-font-family:    "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
@heading-font-family: @main-font-family;
@body-font-family:    @main-font-family;

